<template>
	<div class="support-right" v-if="async">
		<input class="support-right_head" v-model="customerMatter.name" v-if="customerMatter" @input="selectChange('name')">
		<div class="support-right_posibox">
			<div class="support-right_vto">
				<div class="support-right_vli">
					<img class="support-right_vimg" :src="selectObjct['statuss'].icon" v-if="selectObjct['statuss']" />
					<div class="support-right_vbox">
						<div class="support-right_vt1">{{ selectModel('statuss', customerMatter.status) }}</div>
						<div class="support-right_vt2">当前状态</div>
					</div>
					<div class="support-right_block">
						<el-select class="support-select_cxt" v-model="customerMatter.status" placeholder="全部" size="mini"
							@change="selectChange('status')">
							<el-option class="support-select_conter" v-for="item in condition.statuss" :key="item.key"
								:label="item.value" :value="item.key">
								<div class="support-select_mli">
									<img class="support-select_cImg" :src="item.icon" />
									<span class="support-select_cTxt">{{ item.value }}</span>
								</div>
							</el-option>
						</el-select>
					</div>
				</div>
				<div class="support-right_vli">
					<img class="support-right_vimg" :src="selectObjct['employees'].icon" v-if="selectObjct['employees']" />
					<div class="support-right_vbox">
						<div class="support-right_vt1">{{ selectModel('employees', customerMatter.userId) }}</div>
						<div class="support-right_vt2">处理人</div>
					</div>
					<div class="support-right_block">
						<el-select class="support-select_cxt" v-model="customerMatter.userId" placeholder="全部" size="mini"
							@change="selectChange('userId')">
							<el-option class="support-select_conter" v-for="item in condition.employees" :key="item.key"
								:label="item.value" :value="item.key">
								<div class="support-select_mli">
									<img class="support-select_cImg" :src="item.icon" />
									<span class="support-select_cTxt">{{ item.value }}</span>
								</div>
							</el-option>
						</el-select>
					</div>
				</div>
				<div class="support-right_vli">
					<img class="support-right_vimg" :src="selectObjct['helpUserId'].icon" v-if="selectObjct['helpUserId']" />
					<div class="support-right_vbox">
						<div class="support-right_vt1">{{ selectModel('helpUserId', customerMatter.helpUserId) }}</div>
						<div class="support-right_vt2">协助人</div>
					</div>
					<div class="support-right_block">
						<el-select class="support-select_cxt" v-model="customerMatter.helpUserId" placeholder="全部" size="mini"
							@change="selectChange('helpUserId')">
							<el-option class="support-select_conter" v-for="item in condition.employees" :key="item.key"
								:label="item.value" :value="item.key">
								<div class="support-select_mli">
									<img class="support-select_cImg" :src="item.icon" />
									<span class="support-select_cTxt">{{ item.value }}</span>
								</div>
							</el-option>
						</el-select>
					</div>
				</div>
				<div class="support-right_vli">
					<img class="support-right_vimg" :src="selectObjct['priorities'].icon" v-if="selectObjct['priorities']" />
					<div class="support-right_vbox">
						<div class="support-right_vt1">{{ selectModel('priorities', customerMatter.priority) }}</div>
						<div class="support-right_vt2">优先级</div>
					</div>
					<div class="support-right_block">
						<el-select class="support-select_cxt" v-model="customerMatter.priority" placeholder="全部" size="mini"
							@change="selectChange('priority')">
							<el-option class="support-select_conter" v-for="item in condition.priorities" :key="item.key"
								:label="item.value" :value="item.key">
								<div class="support-select_mli">
									<img class="support-select_cImg" :src="item.icon" />
									<span class="support-select_cTxt">{{ item.value }}</span>
								</div>
							</el-option>
						</el-select>
					</div>
				</div>
				<div class="support-right_vli">
					<i class="el-input__icon el-icon-date support-right_vicon"></i>
					<div class="support-right_vbox">
						<div class="support-right_vt1">{{ timeTranslate(customerMatter.createTime) }}</div>
						<div class="support-right_vt2">开始时间</div>
					</div>
					<div class="support-right_block">
						<el-date-picker @change="selectChange('createTime')" v-model="customerMatter.createTime"
							format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" type="datetime"
							placeholder="选择日期时间"></el-date-picker>
					</div>
				</div>
				<div class="support-right_vli">
					<i class="el-input__icon el-icon-date support-right_vicon"></i>
					<div class="support-right_vbox">
						<div class="support-right_vt1">{{ timeTranslate(customerMatter.endTime) }}</div>
						<div class="support-right_vt2">结束时间</div>
					</div>
					<div class="support-right_block">
						<el-date-picker @change="selectChange('endTime')" v-model="customerMatter.endTime" format="yyyy-MM-dd HH:mm"
							value-format="yyyy-MM-dd HH:mm" type="datetime" placeholder="选择日期时间"></el-date-picker>
					</div>
				</div>
			</div>
			<div class="support-right_buts">
				<div class="support-right_btadd" @click="appendTab">添加</div>
			</div>
		</div>
		<el-tabs v-model="activeTab" class="demo-tabs" @tab-click="tabClick">
			<el-tab-pane label="事项" name="message">
				<div class="support-right-content" v-if="customerMatter">
					<div class="support-right-mt">
						<div class="support-right-buts" @click="updateCenter">{{ markdownFool ? '完成' : '编辑' }}</div>
						<div class="support-right-buts" @click="deleteChange" style="background-color: red;">删除</div>
						<div class="support-right-buts" @click="copyTab" style="background-color: #67c23a;" title="复制当前链接">
							<i class="el-icon-document-copy"></i>
						</div>
					</div>
					<x-markdown :class="{ 'content-xmarkdown': !markdownFool }" ref="x_markdown" v-model="customerMatter.content"
						:editable="false" :toolbarsFlag="markdownFool"></x-markdown>
				</div>
				<div class="support-right_box">
					<ul class="text-part_ul">
						<li class="text-part_li" v-for="(item, index) in commentList" :key="index">
							<div class="part_li-top">
								<div class="part_li-p1">
									<img src="http://diyapi.5ug.com/wwwroot/static/images/avator/man_64.png" />
								</div>
								<div class="part_li-p2">
									<p class="li-p2_text">{{ item.userName }}</p>
									<p class="li-p2_intro">{{ item.createTime }}</p>
								</div>
								<div class="part_li-p3"></div>
							</div>
							<div class="part_li-cotx">
								<div class="li-cotx_mtion">{{ item.content }}</div>
								<!-- <ul>
									<li><i class="el-icon-paperclip"></i>下载.pdf</li>
									<li><i class="el-icon-paperclip"></i>下载.pdf</li>
								</ul> -->
							</div>
						</li>
					</ul>
				</div>
			</el-tab-pane>
		</el-tabs>
		<support-pupop ref="support_pupop" @supportPupopInit="supportPupopInit"></support-pupop>
	</div>
</template>

<script>
import ala from 'ala'
import api from 'api'
import service from './../service'
import supportPupop from './support-pupop'
export default {
	components: {
		supportPupop
	},
	data () {
		return {
			data: {},
			customerMatter: null, //事项
			activeTab: 'message',
			projectInfo: [], // 项目信息
			logs: null, // 日志
			viewModel: null,
			condition: {},
			selectObjct: {},
			updateModel: {},
			commentList: {},
			markdownFool: false,
			async: false,
			nTitle: '',
			leftModel: null,
			setTimeModel: null
		}
	},
	beforeDestroy () {
		clearInterval(this.setTimeModel)
	},
	methods: {
		async init (data, leftModel) {
			this.data = data
			this.leftModel = leftModel
			this.customerMatter = await ala.httpId('Api/CustomerMatter/View', data.id)
			this.async = true
			this.condition = await service.condition()
			var this_ = this
			if (this.$refs.x_markdown) {
				this.$refs.x_markdown.init(this_.customerMatter.conten)
			}
		},
		// 复制当前链接
		copyTab () {
			if (this.customerMatter) {
				var locationValue = window.location
				var hrefValue = `${locationValue.origin}${locationValue.pathname}?id=${this.customerMatter.id}`
				this.copyUrl(hrefValue)
			}
		},
		// 复制地址
		copyUrl (data) {
			let oInput = document.createElement('input')
			oInput.style = 'position: fixed;bottom: -10000px;left: -10000px;'
			oInput.value = data
			document.body.appendChild(oInput)
			oInput.select() // 选择对象
			document.execCommand('Copy')
			this.$message({
				message: '已成功复制当前地址',
				type: 'success'
			})
		},
		timerChang () {
			var this_ = this
			this.setTimeModel = setTimeout(() => {
				this_.selectChange('content')
				clearInterval(this_.setTimeModel)
				this_.timerChang()
			}, 100)
		},
		async commentInit (data) {
			var commPage = await ala.httpId('Api/MatterComment/Page', data.id)
			this.commentList = commPage.result
		},
		async save () {
			let para = {
				matterId: this.customerMatter.id,
				content: this.viewModel
			}
			let result = await ala.diyHttpPost('Api/CustomerMatterComment/Edit', para)
			if (result.isSuccess) {
				ala.toast(result.message)
				if (this.$refs.commentMarkdown) {
					this.$refs.commentMarkdown.init('')
				}
				this.viewModel = ``
				var commPage = await ala.httpId('Api/MatterComment/Page', this.data.id)
				this.commentList = commPage.result
			}
		},
		async tabClick (tab) {
			if (tab.name === 'log') {
				this.logs = await service.logs(this.customerMatter.id)
			}
			if (tab.name === 'projectInfo') {
				this.projectInfo = await service.project(this.customerMatter.id)
			}
		},
		selectModel (type, value) {
			if (this.condition) {
				var arr = null
				var helpUserType = type
				if (helpUserType === 'helpUserId') {
					type = 'employees'
				}
				if (!this.condition[type]) {
					return
				}
				if (!value) {
					value = this.condition[type][0].key
				}
				arr = this.condition[type].filter(item => item.key === value)
				if (helpUserType === 'helpUserId') {
					this.$set(this.selectObjct, helpUserType, arr[0])
				} else {
					this.$set(this.selectObjct, type, arr[0])
				}
				if (arr.length === 0) {
					return
				}
				return arr[0].value
			}
		},
		async updateCenter () {
			if (this.markdownFool) {
				this.selectChange('content')
				clearInterval(this.setTimeModel)
			} else {
				this.timerChang()
			}
			this.markdownFool = !this.markdownFool
		},
		timeTranslate (time) { //时间转化
			var date = new Date(time)
			var year = date.getFullYear()
			var month = (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)
			var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
			var hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
			var minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
			var timeText = `${year}-${month}-${day} ${hour}:${minute}`
			return timeText
		},
		async selectChange (type) {
			this.updateModel[type] = this.customerMatter[type]
			var repones = await service.update(this.customerMatter.id, type, this.updateModel[type])
		},
		appendTab () {
			this.$refs.support_pupop.open(this.customerMatter, this.leftModel)
		},
		supportPupopInit () { //添加成功执行
			this.$emit('supportRightChange')
		},
		async deleteChange () { //删除
			var repones = await service.deleteItem(this, this.customerMatter.id)
			if (repones.status === 1) {
				this.supportPupopInit()
			}
		}
	}
}
</script>

<style lang="scss">
@import "./support-right.scss";
</style>